
<style lang="less" scoped>
.ivu-transfer-list {
  text-align: left;
}
</style>

<template>
  <div>
    <!-- 搜索框 -->
    <Collapse v-model="collapseShow" accordion>
      <Panel name="1">
        <div class="admin-top-right">
          <!-- <Button type="primary" @click.stop="addBtn" class="top-right-btn">新增</Button> -->
          <Button type="error" @click.stop="batchDeletBtn" class="top-right-btn">批量删除</Button>
        </div>
        <div slot="content">
          <Form ref="searchForm" :label-width="100" v-model="condition">
            <Row>
              <Col span="6">
                <FormItem label="创建日期">
                  <DatePicker type="daterange" v-model="createdDateRange" placeholder="请选择起始和截止日期"></DatePicker>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem label="教师姓名">
                  <Input placeholder="请输专业名" clearable v-model="condition.teacherName"></Input>
                </FormItem>
              </Col>
              <Col span="6">
                <FormItem label="状态">
                  <Select v-model="condition.status" clearable placeholder="请选择状态">
                    <Option value="1">正常</Option>
                    <Option value="2">已删除</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
          </Form>
          <!-- 查询重置按钮-->
          <div style="text-align:center">
            <Button type="primary" @click="queryMethod()" class="ivu-btn ivu-btn-primary">查询</Button>
            <Button
              type="info"
              @click="handleResetBtn('condition')"
              class="ivu-btn ivu-btn-dashed"
              style="margin-left: 8px"
            >重置</Button>
          </div>
        </div>
      </Panel>
    </Collapse>
    <!-- 数据表格 -->
    <div>
      <Table
        size="small"
        border
        :stripe="true"
        :columns="tableHeader"
        :data="tableData"
        height="500"
        style="margin-top: 12px"
        @on-selection-change="selectionChange"
      ></Table>
    </div>
    <!-- 增加和修改的模态框 -->
    <div>
      <Modal
        :title="modalTitle"
        :value="modalShow"
        @on-cancel="addUpdateCancle"
        @on-ok="handleSubmit"
        :mask-closable="modalReadonly"
        :width="800"
        ok-text="保存"
      >
        <add-update :row="editForm" :isCourse="false"></add-update>
        <div slot="footer" v-if="footerFlag"></div>
      </Modal>
    </div>
    <!-- 分配课程的模态框 -->
    <!-- <div>
      <Modal
        title="分配课程"
        :value="assinCourseModalShow"
        :mask-closable="modalReadonly"
        :closable="false"
        :draggable="true"
      >
        <div align="center">
          <Card :bordered="false">
            <p slot="title">{{assignCourseEntity.proName}}</p>
            <Transfer
              :titles="transferTitles"
              :data="allCourseData"
              :target-keys="selectedCourse"
              @on-change="handleSelectCourse"
              style="text-align: left;padding-left: inherit"
            ></Transfer>
          </Card>
        </div>
        <div slot="footer" v-if="true">
          <Button type="text" size="large" @click="assinCourseModalCancel">关闭</Button>
          <Button type="primary" size="large" @click="assinCourseHandle">保存</Button>
        </div>
      </Modal>
    </div>
    <!-- 显示信息的模态框-->
    <!-- <div>
      <Modal v-model="modalShow" :title="modaltitle">
        <com-show-detail :data="showData"></com-show-detail>
      </Modal>
    </div>-->
    <!-- 分页组件 -->
    <div>
      <navigation :search.sync="doSearch" @navpage="pagerCallback"></navigation>
    </div>
  </div>
</template>
<script>
import navigation from '@/view/components/navigation/navigation'
import ComShowDetail from './ComShowDetail'
import httpUtil from '@/libs/httpUtil'

export default {
  name: 'RoomManage',
  components: {
    navigation,
    ComShowDetail
    // AddUpdate
  },
  data () {
    return {
      createdDateRange: [], // 创建日期的起始截止值
      showData: [],
      modalShow: false,
      modaltitle: '',
      tableHeader: [
        {
          type: 'selection',
          minWidth: 30,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '序号',
          type: 'index',
          width: 80,
          align: 'center',
          fixed: 'left'
        },
        {
          // 状态
          title: '状态',
          key: 'status',
          minWidth: 90,
          ellipsis: true,
          align: 'center',
          render: (h, params) => {
            let status = params.row.status
            if (status == 3) {
              return h(
                'span',
                { style: { color: '#ed4014', fontWeight: 'bold' } },
                '已删除'
              )
            } else {
              return h(
                'span',
                { style: { color: '#2d8cf0', fontWeight: 'bold' } },
                '正常'
              )
            }
          },
          fixed: 'left'
        },
        {
          title: '教师姓名',
          key: 'teacherName',
          minWidth: 150,
          ellipsis: true,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '描述',
          key: 'desc',
          minWidth: 230,
          ellipsis: true,
          align: 'center'
          // fixed: 'left'
        },
        {
          title: '专业',
          key: 'teacherName',
          minWidth: 100,
          ellipsis: true,
          align: 'center',
          render: (h, params) => {
            let proList = params.row.allData.professionList
            if (proList && proList.length > 0) {
              return h(
                'Button',
                {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.showModal(proList, '专业', 'proName')
                    }
                  }
                },
                '查看'
              )
            } else {
              return h('span', '无')
            }
          }
        },
        {
          title: '课程',
          key: 'teacherName',
          minWidth: 100,
          ellipsis: true,
          align: 'center',
          render: (h, params) => {
            let courseList = params.row.allData.courseList
            if (courseList && courseList.length > 0) {
              return h(
                'Button',
                {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.showModal(courseList, '课程', 'courseName')
                    }
                  }
                },
                '查看'
              )
            } else {
              return h('span', '无')
            }
          }
        },
        {
          title: '学生',
          key: 'teacherName',
          minWidth: 100,
          ellipsis: true,
          align: 'center',
          render: (h, params) => {
            let studentList = params.row.allData.studentList
            if (studentList && studentList.length > 0) {
              return h(
                'Button',
                {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.showModal(studentList, '学生', 'name')
                    }
                  }
                },
                '查看'
              )
            } else {
              return h('span', '无')
            }
          }
        },
        {
          title: '学生人数',
          key: 'studentCount',
          minWidth: 90,
          ellipsis: true,
          align: 'center'
        },
        {
          title: '创建日期',
          key: 'createdAt',
          minWidth: 150,
          ellipsis: true,
          align: 'center'
          // render: (h, params) => {
          //   return h('span', {}, this.dateFormat(params.row.createdAt))
          // }
        },
        {
          title: '修改日期',
          key: 'updatedAt',
          minWidth: 150,
          ellipsis: true,
          align: 'center'
        },
        {
          title: '删除日期',
          key: 'deletedAt',
          minWidth: 150,
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          minWidth: 200,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            if (params.row.status !== 3) {
              let btns = []
              btns.push(
                h(
                  'Button',
                  {
                    props: {
                      type: 'success',
                      size: 'small',
                      to: {
                        path: '/answer-room-details/' + params.row.tid
                      }
                    },
                    style: {
                      marginRight: '5px'
                    }
                    // on: {
                    //   click: () => {
                    //     this.gotoRaRoom(params.row);
                    //   }
                    // }
                  },
                  '进入答疑室'
                )
              )
              btns.push(
                h(
                  'Button',
                  {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.deleteBtn(params.row.tid)
                      }
                    }
                  },
                  '删除'
                )
              )
              return h('div', btns)
            } else {
              return h('span', {}, '无法操作')
            }
          }
        }
      ],
      tableData: [], // 列表数据
      collapseShow: false,
      doSearch: false,
      modalTitle: '添加专业',
      modalShow: false,
      modalReadonly: false,
      footerFlag: false,
      editForm: {},
      selectArray: [],
      condition: {}
    }
  },
  methods: {
    // 显示专业
    showModal (dataList, title, key) {
      if (dataList && dataList.length > 0) {
        this.$Modal.info({
          // title:title,
          render: h => {
            let tags = []
            dataList.forEach(item => {
              tags.push(h('tag', { props: { color: 'green' } }, item[key]))
            })
            return h('div', tags)
          }
        })
      }
    },

    // 多选
    selectionChange (val) {
      this.selectArray = val
      console.log(val)
      console.log('selctArray:', this.selectArray)
    },

    // 删除表格数据
    deleteBtn (id) {
      debugger
      id += ','
      this.handleDelete(id)
    },

    // 批量删除
    batchDeletBtn () {
      let select = this.selectArray
      let ids = ''
      // 判断有无选择
      if (select.length > 0) {
        let flag = false
        // 取出每一项id 拼接成字符串
        select.forEach((entity, n) => {
          if (entity.status === 3) {
            flag = true
          }
          ids = ids + entity.tid + ','
        })
        if (flag === true) {
          this.$Message.warning('所选记录包含已删除项')
        } else {
          this.handleDelete(ids)
        }
      } else {
        this.$Message.warning('请先选择需要删除的选项')
      }
    },

    // 向后端请求删除操作
    handleDelete (ids) {
      httpUtil.asyncDelete(
        'admin/rm/delete',
        {
          ids: ids
        },
        res => {
          if (res.data.code === 200) {
            this.$Message.success(res.data.msg)
            this.queryMethod()
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    // 搜索重置
    handleResetBtn () {
      this.$refs['searchForm'].resetFields()
      this.condition = {}
      this.createdDateRange = []
      this.queryMethod()
    },

    // 点击翻页
    pagerCallback (page, search) {
      let option = {
        url: 'admin/rm/queryByCondition',
        pageData: page,
        success: response => {
          this.tableData = response.data.records
        }
      }
      if (search) {
        option.params = {
          data: this.condition
        }
      }
      this.$httpUtil.pageSearch(option)
    },
    dateFormat (time) {
      if (time) {
        let date = new Date(time)
        return date.format('yyyy-MM-dd')
      } else {
        return ''
      }
    },
    queryMethod () {
      if (this.createdDateRange[0] !== '') {
        // 如果选择了日期，取出起始值
        this.condition.createdDateStart = this.createdDateRange[0]
        this.condition.createdDateEnd = this.createdDateRange[1]
      }
      this.doSearch = true
    }
  },
  mounted: function () {
    this.queryMethod()
  }
}
</script>
